
<template>
    <div class="test-getter-container">
        <h1>test-getter-container</h1>

        <ul>
            <li :key="index" v-for="(item,index) in filterTodosData">
                {{ item.name }}
            </li>
        </ul>

        <h2>
            {{ getTodoByIdData.name }}
        </h2>

        <!-- <ul>
            <li :key = "index" v-for="(item,index) in filterTodos">
                {{ item.name }}
            </li>
        </ul> -->

        <ul>
            <li :key="index" v-for="(item,index) in todos">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        computed: {
            //使用展开运算符将 getter混入computed对象中
            // ...mapGetters([
            //     'filterTodos',
            // ]),

            //如果你想将一个getter属性，另取一个名字，使用对象形式
            ...mapGetters({
                todos: 'filterTodos'
            }),

            //在computed中直接过滤todos
            // filterStatus() {
            //     return this.$store.state.todos.filter((item)=> item.status)
            // },
            //在getter数据中直接过滤todos
            filterTodosData() {
                return this.$store.getters.filterTodos;
            },
            //在getter中定义一个方法 然后根据方法过滤数据
            getTodoByIdData() {
                return this.$store.getters.getTodoById(2);
            }
        },
        data() {
            return {
                
            }
        },
    }
</script>

<style>
    .test-getter-container {

    }
</style>